<template>
    <el-dialog v-model="dialog" width="500">
        <el-form :model="formData" label-position="right" label-width="auto">
            <el-form-item label="路径">
                <el-input v-model="formData.path" />
            </el-form-item>
            <el-form-item label="级别">
                <el-select v-model="formData.permissions">
                    <el-option :value="0" label="管理员"></el-option>
                    <el-option :value="1" label="浏览"></el-option>
                    <el-option :value="2" label=""></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="行为">
                <el-input v-model="formData.actions" />
            </el-form-item>
        </el-form>
        <template #footer>
            <slot></slot>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';

type FormData = Record<string, any>
export interface Expose {
    open: () => void
    close: () => void
    updateFormData: (obj: FormData) => void
    getFormData: () => FormData
}

const dialog = ref(false)
const formData = ref<FormData>({})

const open = () => {
    dialog.value = true
}

const close = () => {
    dialog.value = false
}

const updateFormData: Expose['updateFormData'] = (obj) => {
    formData.value = obj
}

const getFormData = () => {
    return formData.value
}

defineExpose({
    open,
    close,
    updateFormData,
    getFormData
})

</script>

<style scoped></style>